<template>
    <div class="freeTimeWork">
        <ALoading v-if="loading"></ALoading>
        <template v-else>
            <ul>
                <div class="timeStamp">
                    <span class="day">12
                        <em>13</em>
                    </span>
                    <span class="week">星期三</span><br/>
                    <span class="record">今日打卡2次&nbsp;工时时长3小时</span>
                     <span class="correct">申请补卡&nbsp;></span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">补卡申请<b class="process">审批中&nbsp;></b></span>
                        <em class="catchTime">补卡时间：2017-09-25 15:39</em>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">补卡申请<b class="blue">已拒绝&nbsp;></b></span>
                        <em class="catchTime">补卡时间：2017-09-25 13:41</em>
                    </div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>14:01</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                        <span class="correct">补卡·已通过&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>12:01</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                         <span class="correct">补卡·已通过&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:29</strong>打卡时间</span>
                    </div>

                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
            </ul>
            <ul>
                <div class="timeStamp">
                    <span class="day">12
                        <em>12</em>
                    </span>
                    <span class="week">星期二</span><br/>
                    <span class="record">今日打卡3次&nbsp;工时时长5小时</span>
                     <span class="correct">申请补卡&nbsp;></span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">未打卡</span>
                        <em class="abnormal">缺卡</em>
                    </div>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>14:01</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                        <span class="correct">补卡·已通过&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>12:01</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                         <span class="correct">补卡·已通过&nbsp;></span>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:29</strong>打卡时间</span>
                    </div>

                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
            </ul>
            <ul>
                <div class="timeStamp">
                    <span class="day">25
                        <em>9</em>
                    </span>
                    <span class="week">星期五</span><br/>
                    <span class="record">当日打卡3次&nbsp;工时时长6.5小时</span>
                     <span class="correct">申请补卡&nbsp;></span>
                </div>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>18:29</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>14:01</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">未打卡</span>
                        <em class="abnormal">缺卡</em>
                    </div>
                    <p class="companyAddress none">天瑞99商务大厦</p>
                    <p class="locationAddress none">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
                <li>
                    <div>
                        <span class="clockInOut">
                            <strong>09:29</strong>打卡时间</span>
                    </div>
                    <p class="companyAddress">天瑞99商务大厦</p>
                    <p class="locationAddress">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-location"></use>
                        </svg>厦门市思明区观音山CDB宜兰路4号</p>
                    <div class="dot"></div>
                </li>
            </ul>
        </template>
        <pulldonwLoad v-show="upDrapLoad"></pulldonwLoad>
    </div>
</template>

<script>
import ALoading from "./_loading.vue";
import page404 from "./_page404.vue";
export default {
  name: "attendance--overview",
  components: {
    ALoading,
    page404
  },
  data() {
    return {
      loading: true
    };
  },
  props: ["upDrapLoad"],
  methods: {},
  mounted: function() {
    var self = this;
    setTimeout(function() {
      self.loading = false;
    }, 10);
  }
};
</script>
